<template>
  <el-container>
    <el-header>
      <div class="picture">
          <img src="../assets/logo.png" alt>
      </div>
      <div class="title">电商后台管理</div>
      <el-button type="info"  @click="open">退出</el-button>
    </el-header>
    <el-container >
      <el-aside :width=" isCollapse ? '64px' : '200px'">
        <!-- 侧边导航栏 -->
            <el-menu
              :default-active='nowPath'
              :collapse-transition='flag'
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
              unique-opened
              :collapse="isCollapse"

            >
              <div class="toggle" @click="close">|||</div>
              <el-submenu :index="e.path" v-for="e in menulist" :key="e.id">
                <template slot="title">
                  <i :class="iconsObj[e.authName]"></i>
                  <span style="margin:0 10px">{{e.authName}}</span>
                </template>
                <el-menu-item :index="'/'+ et.path" v-for="et in e.children" :key="et.id" @click="savePath(et.path)">
                <i class="el-icon-menu"></i>{{et.authName}}
                </el-menu-item>
              </el-submenu>
            </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <!-- 子路由 -->
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menulist: [],
      nowPath: '',
      isCollapse: false,
      flag: false,
      iconsObj: {
        '用户管理': 'iconfont icon-users',
        '权限管理': 'iconfont icon-tijikongjian',
        '商品管理': 'iconfont icon-shangpin',
        '订单管理': 'iconfont icon-danju',
        '数据统计': 'iconfont icon-baobiao'
      }
    }
  },
  created() {
    this.getMeun()
    this.nowPath = window.sessionStorage.getItem('nowPath')
  },
  methods: {
    // 退出逻辑
    open() {
      this.$confirm('将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$router.push('/login')
          window.sessionStorage.clear()
          this.$message({
            type: 'success',
            message: '成功退出!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消!'
          })
        })
    },
    // 收起菜单
    close() {
      this.isCollapse = !this.isCollapse
    },
    savePath(val) {
      window.sessionStorage.setItem('nowPath', val)
    },
    // 请求菜单
    async getMeun() {
      let { data: res } = await this.$http.get('menus')
      this.menulist = res.data
    }
  }
}
</script>

<style lang='less' scoped>
.el-container {
  height: 100%;
}
.el-header,
.el-footer {
  background-color: #373d41;
  color: #fff;
  font-size: 25px;
  font-weight: 700px;
  text-align: center;
  position: relative;
  line-height: 60px;
  .title {
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
  }
  .picture {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin: 5px 0 0 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .el-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
  }
}

.el-aside {
  background-color: #333744;
  color: #fff;
  .el-menu {
    border: none;
  }
  .toggle {
    letter-spacing:0.25em;
    cursor:pointer;
    text-align:center;
    width:100%;
    padding: 5px 0;
  }

}

.el-main {
  background-color: #eaedfe;
  color: #333;

}

body > .el-container {
  margin-bottom: 40px;
}
</style>
